import React,{PropTypes} from 'react';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
const FormItem = Form.Item;
import styles from '../layout/common.css';

const  NormalLoginForm = ({
  onOk,
   form: {
    getFieldDecorator,
    validateFieldsAndScroll
  }
}) => {
   function handleOk (e) {
     e.preventDefault()
     validateFieldsAndScroll((errors, values) => {
       if (errors) {
         return
       }
       onOk(values)
     })
   }
    return (
      <Form onSubmit={handleOk} className={styles.loginForm}>
        <FormItem>
          {getFieldDecorator('name', {
            rules: [{ required: true, message: 'Please input your name! 你可以输入22试试' }],
          })(
            <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="name" />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('age', {
            rules: [{ required: true, message: 'Please input your age! 你可以输入22试试' }],
          })(
            <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="age" placeholder="age" />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('remember', {
            valuePropName: 'checked',
            initialValue: true,
          })(
            <Checkbox>Remember me</Checkbox>
          )}
          <a className={styles.loginFormForgot}>Forgot password</a>
          <Button type="primary" htmlType="submit" className={styles.loginFormButton}>
            Log in
          </Button>
          Or <a>register now!</a>
        </FormItem>
      </Form>
    );
}
 
const WrappedNormalLoginForm = Form.create()(NormalLoginForm);
export default WrappedNormalLoginForm;